<template>
  <div class="box">
    <a-card :style="{ width: '390px', height: '420px' }" :bordered="false" class="card">
      <h1 class="title">报警事件详情</h1>
      <a-table
          :columns="columns"
          :data="pressureStore.screenPressure"
          column-resizable
          :bordered="{cell:true}"
          :pagination="false"
      ></a-table>
    </a-card>
    <a-card :style="{ width: '390px', height: '420px' }" :bordered="false" class="card1">
      <a-table
          column-resizable
          :columns="columns1"
          :data="pressureStore.addressTimePressureValueObj"
          :pagination="false"
          :scroll="{y:1000}"
          style="height: 400px"
      />
    </a-card>
  </div>

</template>

<script lang="ts" setup>
import {reactive} from "vue";
import {Pressure} from "../../../types/tanTypes/pressure";
import {usePressureStore} from "../../../store/pressure";

const columns = reactive([
  {
    title: '事件',
    dataIndex: 'name',
    width: 30,
  },
  {
    title: '详情',
    dataIndex: 'concreteValue',
    width: 120,
  },
]);

const columns1 = reactive([
  {
    title: '时间',
    dataIndex: 'name',
    width: 50,
  },
  {
    title: '今日压力（MPa）',
    dataIndex: 'todayPressure',
    width: 130,
  },
  {
    title: '昨日压力（MPa）',
    dataIndex: 'yesToday',
    width: 140,
  },
]);
// 实例化水压状态机
const pressureStore = usePressureStore()


</script>

<style lang="scss" scoped>
.box {
  .card {
    border: 5px solid #ebf5ff;
    border-left: none;
  }

  .card1 {
    margin-top: 20px;
    border: 5px solid #ebf5ff;
    border-left: none;
  }
  .tab {
    height: 500px;
  }

  .title {
    font-size: 20px;
    border-left: 5px solid #0079fe;
    height: 40px;
    line-height: 40px;
    border-radius: 3px;
    padding-left: 10px;
  }
}
</style>